<template>
  <div class="contactForm">
    <div class="contactForm-form">
      <div class="contactForm-row">
        <label style="letter-spacing:7px">收件人</label>
        <input type="text" placeholder="收件人姓名" maxlength="20" v-model="name">
      </div>

      <div class="contactForm-row">
        <label>联系电话</label>
        <input type="tel" placeholder="收货人电话" v-model="phone">
      </div>

      <div class="contactForm-row" @click="selectArea()">
        <label>所在地区</label>
        <input type="text" placeholder="请选择" readonly v-model="area">
      </div>
      <textarea placeholder="请补充详细收货地址，如街道、门牌号、楼层几房间号等" maxlength="100" v-model="address"></textarea>
    </div>

    <!-- <button type="button" :class="{'active-btn': isDisabled==false}" @click="submit()" :disabled="isDisabled">保 存</button> -->
    <button type="button" @click="submit()">保 存</button>

     <!-- 省份选择 -->
    <div class="bg-layer" v-show="areaPopup" @click="areaPopup=false"></div>
    <div class="area" v-show="areaPopup">
      <v-distpicker @selected="onSelected"></v-distpicker>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import VDistpicker from "../areaPicker/areaPicker";

export default {
  data() {
    return {
      name: "",
      phone: "",
      area: "",
      address: "",
      address_id: "",
      isDisabled: true,
      areaPopup: false
    };
  },
  created() {
  },
  methods: {
    selectArea() {
      this.areaPopup = true;
    },
    onSelected(currentProvince,currentCity,currentCounty) {
      console.log('*******************************')
      console.log(currentProvince.name)
      console.log(currentProvince.code)
      console.log('*******************************')
      this.area = currentProvince.name + currentCity.name + currentCounty.name;
      this.areaPopup = false;
    },
    submit(){
      this.$router.push({
        path: '/test'
      });
    }
  },
  components: {
    VDistpicker
  }

};
</script>

<style lang="less">
@import "./contact.less";
</style>